<template>
    <TechPopup :class="`tech-payment-popup ${mode} ${styleMode}`" title="支付方式" v-model="showSelect" @close="close">
        <RadioGroup v-model="selectVal" @change="changePayType">
            <template v-if="platform.isToutiaoMini">
                <Radio class="payment-item" :name="wechatTypeVal">
                    <div class="payment-content">
                        <div class="payment-icon">
                            <TechIcon name="wechat-pay" color="#65BA69" :size="25" />
                        </div>
                        <div class="payment-info">
                            <div class="payment-name">微信支付</div>
                        </div>
                    </div>
                    <MiniIcon
                        class="check-icon"
                        :name="selectVal === wechatTypeVal ? 'checkfill' : 'checkcircle'"
                        :size="25"
                        :mode="mode"
                        :theme="selectVal === wechatTypeVal ? theme : '#7D7D83'"
                        :styleMode="styleMode"
                    />
                </Radio>
                <Radio class="payment-item" :name="alipayTypeVal">
                    <div class="payment-content">
                        <div class="payment-icon">
                            <TechIcon name="alipay-pay" color="#00A1E9" :size="25" />
                        </div>
                        <div class="payment-info">
                            <div class="payment-name">支付宝</div>
                        </div>
                    </div>
                    <MiniIcon
                        class="check-icon"
                        :name="selectVal === alipayTypeVal ? 'checkfill' : 'checkcircle'"
                        :size="25"
                        :mode="mode"
                        :theme="selectVal === alipayTypeVal ? theme : '#7D7D83'"
                        :styleMode="styleMode"
                    />
                </Radio>
            </template>
        </RadioGroup>
        <div class="btn-el" slot="button">
            <Button class="tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="ensure">确定</Button>
        </div>
    </TechPopup>
</template>

<script>
import { RadioGroup, Radio, Button } from 'vant';
// import { mapState, mapActions } from 'vuex';
import { TechPopup, TechIcon, MiniIcon } from '@components/base';
import { platformTruth } from '@common/environment';
import { PAY_TYPE_MEMBERCARD, PAY_TYPE_WECHAT, PAY_TYPE_ALIPAY } from '@constants/pay';
import ModeMixin from '@common/mixin';

export default {
    name: 'ReviewChoosePayment',
    mixins: [ModeMixin],
    components: {
        TechPopup,
        RadioGroup,
        Radio,
        Button,
        TechIcon,
        MiniIcon,
    },
    props: {
        defaultVal: {
            type: String,
            default: PAY_TYPE_WECHAT,
        },
    },
    data() {
        return {
            showSelect: false,
            selectVal: PAY_TYPE_WECHAT,
            platform: platformTruth(),
            wechatTypeVal: PAY_TYPE_WECHAT,
            alipayTypeVal: PAY_TYPE_ALIPAY,
        };
    },
    methods: {
        show() {
            this.showSelect = true;
            this.selectVal = this.$props.defaultVal;
        },
        close() {
            this.showSelect = false;
        },
        ensure() {
            // 设置支付方式
            this.$emit('ensure', this.selectVal);
            // 关闭
            this.close();
        },
        changePayType(name) {
            this.selectVal = name;
        },
    },
};
</script>

<style lang="less">
.tech-payment-popup {
    .style-mode-top();
    .popup-content {
        padding: 0 !important;
    }
    .payment-item {
        position: relative;
        .p(@gap);
        .border-line();
        &::after {
            left: 0;
            right: 0;
        }
        .van-radio__label {
            .m-l(0);
        }
        .van-radio__label {
            width: 100%;
            height: 100%;
            .flex();
            justify-content: space-between;
            align-items: center;
        }
        .van-radio__input {
            position: absolute;
            right: @gap-md;
            .p(@gap-sm);
            top: 50%;
            .m-t(-@gap-md);
            display: none;
        }
        .payment-content {
            .flex();
            align-items: center;
            .vip-card {
                background: url() no-repeat;
                background-size: 100% 100%;
            }
            .payment-icon {
                .m-r(@gap);
                width: 30px;
                height: 35px;
                .flex-column-center();
            }
            .payment-info {
                .flex-column();
                .payment-name {
                    .font-size();
                    color: @text-color;
                }
                .payment-balance {
                    .font-size-sm();
                    color: @red;
                }
            }
        }
    }
}
</style>

